<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>layout</title>
		<meta name="description" content="">
		<meta name="author" content="wanghe">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">

		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<link rel="stylesheet" href="../css/bootstrap.min.css" >
		<link rel="stylesheet" href="../css/bootstrap-theme.min.css" >

		<script src="../js/jquery.min.js" ></script>
		<script src="../js/bootstrap.min.js" ></script>
		<style>
			body {
				margin: 50px;
			}
		</style>

		<script>
			$(function() {
				$(function() {
					$('#myTab a:last').tab('show');
				});
				
				$('#myTab a').click(function(e) {
				e.preventDefault();
				$(this).tab('show');
				});
				
				// 通过名称选取选项卡
				$('#myTab a[href="#profile"]').tab('show');
				
				// 选取第一个选项卡
				$('#myTab a:first').tab('show');
				
				// 选取最后一个选项卡
				$('#myTab a:last').tab('show');
				
				// 选择第三个选项卡 (0-第一个选项)
				$('#myTab li:eq(2) a').tab('show');

			});

		</script>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="span6" >
					<ul class="nav nav-tabs" >
						<li  >
							<a href="#"> Home</a>
						</li>
						<li  >
							<a href="#"> Tutorials</a>
						</li>
						<li  >
							<a href="#"> Editor</a>
						</li>
						<li  >
							<a href="#"> Gallery</a>
						</li>
						<li  >
							<a href="#"> Contact</a>
						</li>

					</ul>
				</div>
			</div>

			<ul id="myTab" class="nav nav-tabs">
				<li class="active">
					<a href="#home" data-toggle="tab"> Tutorial Point Home </a>
				</li>
				<li>
					<a href="#ios" data-toggle="tab">iOS</a>
				</li>
				<li class="dropdown">
					<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a>
					<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> 
						<li>
							<a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a>
						</li>
						<li>
							<a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a>
						</li>
					</ul>
				</li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="home">
					<p>
						Tutorials Point is a place for beginners in all technical areas.
						This website covers most of the latest technoligies and explains
						each of the technology with simple examples. You also have a
						<b>tryit</b> editor, wherein you can edit your code and
						try out different possibilities of the examples.
					</p>
				</div>
				<div class="tab-pane fade" id="ios">
					<p>
						iOS is a mobile operating system developed and distributed by Apple
						Inc. Originally released in 2007 for the iPhone, iPod Touch, and
						Apple TV. iOS is derived from OS X, with which it shares the
						Darwin foundation. iOS is Apple's mobile version of the
						OS X operating system used on Apple computers.
					</p>
				</div>
				<div class="tab-pane fade" id="jmeter">
					<p>
						jMeter is an Open Source testing software. It is 100% pure
						Java application for load and performance testing.
					</p>
				</div>
				<div class="tab-pane fade" id="ejb">
					<p>
						Enterprise Java Beans (EJB) is a development architecture
						for building highly scalable and robust enterprise level
						applications to be deployed on J2EE compliant
						Application Server such as JBOSS, Web Logic etc.
					</p>
				</div>
			</div>

			<div class="row">
				<div class="span4">
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
					</p>
				</div>
				<div class="span4">
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
					</p>
				</div>
				<div class="span4">
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
					</p>
				</div>
			</div>

		</div>
		<div class="pagination">
			<ul>
				<li>
					<a href="#">Prev</a>
				</li>
				<li class="active">
					<a href="#">1</a>
				</li>
				<li>
					<a href="#">2</a>
				</li>
				<li>
					<a href="#">3</a>
				</li>
				<li>
					<a href="#">4</a>
				</li>
				<li>
					<a href="#">Next</a>
				</li>
			</ul>
		</div>
	</body>
</html>
